<template>
  <div class="paramSetting">
    <div class="table">
      <el-table :data="tableData" stripe>
        <el-table-column prop="name" header-align="center" width="180" label="配置名称"></el-table-column>
        <el-table-column prop="code" header-align="center" width="180" label="配置Key"></el-table-column>
        <el-table-column prop="value" header-align="center" align="left" label="配置值" show-overflow-tooltip>
          <template slot-scope="scope"> <span class="show-overflow">{{ scope.row.value }}</span> </template>
        </el-table-column>
        <el-table-column prop="description" header-align="center" width="150" label="配置说明"></el-table-column>
        <el-table-column width="120" header-align="center" label="操作" align="center" v-if="configsUpdatePower">
          <template slot-scope="scope">
            <el-button type="text" class="primaryTextBtn" v-if="configsUpdatePower && scope.row.valueType != 'readonly'" @click="updateLoad(scope.row); dialogVisible = true; ">修改</el-button>
            <el-button type="text" class="primaryTextBtn" disabled v-else>不可修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 修改表单 -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" class="dialogForm" :title="title" v-if="dialogVisible" :visible.sync="dialogVisible" width="700px" :before-close="handleClose" top="7vh">
      <div class="line"></div>
      <el-form :ref="ref" :model="formParam" label-width="128px">
        <el-row v-if="valueType == 'json'">
          <el-form-item v-for="item in AttrDate" :key="item.label" :prop="item.label" :label="item.label" :rules="[{ required: true, message: '请输入~', trigger: 'blur' }]">
            <el-input size="small" v-model="formParam[item.label]" :name="item.label"></el-input>
          </el-form-item>
        </el-row>
        <el-row v-else>
          <!-- 字符串 -->
          <el-form-item v-if="valueType == 'string'" prop="value" :label="formParam.name" :rules="[{ required: true, message: '请输入~', trigger: 'blur' }]">
            <el-input size="small" v-model="formParam.value" name="value"></el-input>
          </el-form-item>
          <!-- 长文本 -->
          <el-form-item v-if="valueType == 'text'" prop="value" :label="formParam.name" :rules="[{ required: true, message: '请输入~', trigger: 'blur' }]">
            <el-input size="small" v-model="formParam.value" name="value" type="textarea" :autosize="{ minRows: 2, maxRows: 10 }"></el-input>
          </el-form-item>
          <!-- 数字 -->
          <el-form-item prop="value" v-if="valueType == 'number'" :label="formParam.name" :rules="[{ required: true, message: '请输入~', trigger: 'blur' }]">
            <el-input size="small" v-on:input="
                formParam.value = formParam.value.replace(/[^\d]/g, '')
              " v-model="formParam.value" name="value">
            </el-input>
          </el-form-item>
          <!-- 时间 -->
          <el-form-item prop="value" v-if="valueType == 'time'" :label="formParam.name" :rules="[{ required: true, message: '请选择~', trigger: 'chenge' }]">
            <el-time-picker size="small" name="value" v-model="formParam.value" format="HH:mm" value-format="HH:mm">
            </el-time-picker>
          </el-form-item>
          <!-- 日期 -->
          <el-form-item prop="value" v-if="valueType == 'date'" :label="formParam.name" :rules="[{ required: true, message: '请选择~', trigger: 'chenge' }]">
            <el-date-picker v-model="formParam.value" value-format="yyyy-MM-dd" type="date" :disabled="edit" name="value">
            </el-date-picker>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="配置说明">
            <el-input size="small" type="textarea" :rows="2" v-model="formParam.description" readonly></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div class="formBtn">
        <el-button size="small" type="primary" @click="updateSubmit()">确定</el-button>
        <el-button size="small" @click="cancel()">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "sysConfigs",
    inject: ["reload"],
    data() {
      return {
        configsUpdatePower: this.$util.btnShow("sysConfigs.update"), //修改按钮权限
        dialogVisible: false,

        title: "",
        isRouterAlive: true,
        tableData: [],
        formParam: {
          id: "",
          value: "", //参数
          code: "", //key
          name: "", //name
          valueType: "", //type
          description: "",
          modifyTime: "",
          modifyBy: "",
          sortNum: ""
        },
        formParamDefault: {
          id: "",
          value: "", //参数
          code: "", //key
          name: "", //name
          valueType: "", //type
          description: "",
          modifyTime: "",
          modifyBy: "",
          sortNum: ""
        },
        ref: "form",
        AttrDate: [], //json转为数组
        dateParam: {
          id: "",
          value: "", //参数
          code: "", //key
          name: "", //name
          valueType: "", //type
          modifyTime: "",
          modifyBy: "",
          sortNum: ""
        },
        valueType: "" //类型
      };
    },
    mounted() {
      this.refresh();
    },
    methods: {
      //加载刷新
      refresh() {
        let that = this;
        that.$req.get({}, api.urlSysConfigsList, function(_r) {
          that.tableData = _r.data;
          that.tableData.forEach(item => {
            item.valueType = item.valueType.toLowerCase();
          });
        });
      },
      // 修改
      updateLoad(row) {
        let that = this;
        this.title = row.name;
        let AttrDate = [];
        this.valueType = row.valueType;
        if (row.valueType == "json") {
          let value = JSON.parse(row.value);
          for (let key in value) {
            AttrDate.push({ value: value[key], label: key });
          }
          this.AttrDate = AttrDate;
          this.formParam = that.$util.clone_str(value);
        } else {
          this.formParam = that.$util.clone_str(row);
        }
        this.dateParam = that.$util.clone_str(row);
      },
      // 提交
      updateSubmit() {
        var that = this;
        var param = {};
        if (this.valueType == "json") {
          var formParam = JSON.stringify(this.formParam);
          this.dateParam.value = formParam;
        } else {
          this.dateParam.value = this.formParam.value;
        }

        param = this.$util.formData(this.dateParam, this.formParamDefault);

        this.$req.postForm(that.$refs[this.ref], param, api.urlSysConfigsUpdate, function(_r) {
          that.$util.notify.success("操作成功！");
          that.dialogVisible = false;
          that.refresh();
        });
      },
      // 取消窗口操作
      cancel() {
        this.dialogVisible = false;
      },
      handleClose(done) {
        done();
      },
    },
  };
</script>

<style scoped lang="scss">
  .el-form-item__content {
    div {
      float: left;
      width: 90%;
    }
  }

  .table {
    width: 100%;
    margin: 0 auto;
    margin-top: 1%;
  }
</style>

<style lang="sass">
  .show-overflow {
    word-break: keep-all;
    white-space: nowrap;
  }

  .el-tooltip__popper {
    max-width: 60% !important;
    font-size: 14px;
  }

  .el-tooltip__popper,
  .el-tooltip__popper.is-dark {
    max-width: 40% !important;
    line-height: 24px;
    color: rgb(255, 255, 255) !important;
    background-color: rgb(49, 49, 49) !important;
  }
</style>